<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import SvgCanvas from './components/Canvas/SvgCanvas.vue'
import CommonToolbar from './components/Toolbar/CommonToolbar.vue'
import LayersPanel from './components/Sidebar/LayersPanel.vue'
import { useEditorStore, useSettingsStore } from './stores'

const editorStore = useEditorStore()
const settingsStore = useSettingsStore()
const { t } = useI18n()

// 主题设置
const isDarkMode = computed(() => {
  if (settingsStore.theme === 'system') {
    return window.matchMedia('(prefers-color-scheme: dark)').matches
  }
  return settingsStore.theme === 'dark'
})

// 侧边栏标签页
const sidebarTabs = [
  { key: 'layers', title: '图层', icon: 'layers-o' },
  { key: 'elements', title: '元素', icon: 'apps-o' },
  { key: 'settings', title: '设置', icon: 'setting-o' }
]

onMounted(() => {
  // 加载用户设置
  settingsStore.loadSettings()
  
  // 检测移动设备
  checkMobileView()
  window.addEventListener('resize', checkMobileView)
  
  // 应用主题
  applyTheme()
})

function checkMobileView() {
  const isMobile = window.innerWidth < 768
  editorStore.setMobileView(isMobile)
}

function applyTheme() {
  document.documentElement.classList.toggle('dark-theme', isDarkMode.value)
}

function toggleSidebar() {
  editorStore.toggleSidebar()
}

function getTabName(tab: string): string {
  const tabItem = sidebarTabs.find(item => item.key === tab)
  return tabItem ? tabItem.title : tab
}

function getTabIcon(tab: string): string {
  const tabItem = sidebarTabs.find(item => item.key === tab)
  return tabItem ? tabItem.icon : 'question-o'
}
</script>

<template>
  <div class="svg-editor" :class="{ 
    'mobile-view': editorStore.ui.isMobileView,
    'dark-theme': isDarkMode
  }">
    <!-- 顶部工具栏 -->
    <van-nav-bar
      class="editor-header"
      :title="t('app.title')"
      left-arrow
      @click-left="toggleSidebar"
    >
      <template #right>
        <van-button 
          size="small" 
          type="primary" 
          icon="plus"
          plain
        >
          新建
        </van-button>
      </template>
    </van-nav-bar>

    <!-- 通用工具栏 -->
    <CommonToolbar />

    <!-- 主要内容区域 -->
    <main class="editor-content">
      <!-- 画布区域 -->
      <div class="canvas-container">
        <SvgCanvas />
      </div>

      <!-- 侧边栏 -->
      <van-popup
        v-model:show="editorStore.ui.sidebarOpen"
        position="right"
        :style="{ width: editorStore.ui.isMobileView ? '80%' : '300px', height: '100%' }"
        class="editor-sidebar"
      >
        <van-tabs 
          v-model:active="editorStore.ui.activeSidebarTab" 
          animated
          swipeable
          class="sidebar-tabs"
        >
          <van-tab 
            v-for="tab in sidebarTabs" 
            :key="tab.key"
            :name="tab.key"
            :title="tab.title"
          >
            <template #title>
              <van-icon :name="getTabIcon(tab.key)" />
              <span>{{ tab.title }}</span>
            </template>
            
            <div class="sidebar-content">
              <LayersPanel v-if="tab.key === 'layers'" />
              <div v-else-if="tab.key === 'elements'" class="panel-placeholder">
                元素面板 - 待实现
              </div>
              <div v-else-if="tab.key === 'settings'" class="panel-placeholder">
                设置面板 - 待实现
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </van-popup>
    </main>
  </div>
</template>

<style scoped>
.svg-editor {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.editor-header {
  border-bottom: 1px solid var(--border-color);
}

.editor-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.canvas-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background-color);
  padding: 20px;
}

.editor-sidebar {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-color);
  height: 100%;
}

.sidebar-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sidebar-tabs :deep(.van-tabs__content) {
  flex: 1;
  overflow: auto;
}

.sidebar-content {
  height: 100%;
  overflow-y: auto;
}

.panel-placeholder {
  padding: 20px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* 移动设备样式 */
.mobile-view .canvas-container {
  padding: 10px;
}

@media (max-width: 768px) {
  .editor-content {
    flex-direction: column;
  }
  
  .canvas-container {
    height: 60vh;
  }
}

/* 暗色主题样式 */
.dark-theme {
  --background-color: var(--dark-background-color);
  --surface-color: var(--dark-surface-color);
  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --border-color: var(--dark-border-color);
}
</style>